<template>
  <div class="preset-log">
    <div v-show="showIndex" style="height: 100%;">
      <div class="container-box">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input
                v-model="formInline.user"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="数据来源">
              <el-select v-model="formInline.region" placeholder="全部">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间选择">
              <el-select v-model="formInline.time" placeholder="近一日">
                <el-option label="近一日" value="day"></el-option>
                <el-option label="近一周" value="week"></el-option>
                <el-option label="近一月" value="month"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="onSubmit">高级查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page-container">
          <left></left>
          <Right></Right>
          <!-- 提示框 -->
        </div>
      </div>
    </div>
    <!-- 跳转页面 -->
    <div class="m-container" v-show="!showIndex">
      <div class="m-header">
        <div class="header-line">
          <i class="el-icon-arrow-left" @click="showIndex=true"> 返回 </i>
        </div>
        <div class="filter-source">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
          >
            <el-form-item label="活动区域">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="text"
            >收起筛选条件
            <i class="el-icon-d-arrow-left"></i>
          </el-button>
        </div>
        <div class="drawmain">
          <div class="addSearchParam-container">
            <div class="one-level-search-content">
              <!-- 左边按钮 -->
              <el-button size="medium" class="change-one-level-btn"
                ><span>或</span></el-button
              >
              <div>
                <div class="addSearchParam">
                  <div class="content">
                    <!-- 上半部分 -->
                    <div class="searchContent">
                      <el-button size="medium" class="change-one-level-btn"
                        ><span>或</span></el-button
                      >
                      <div class="params-item">
                        <span style="width: 34px"></span>

                        <el-select
                          size="mini"
                          style="width: 400px"
                          class="params-input"
                          v-model="formInline.region"
                          placeholder="活动区域"
                        >
                          <el-option
                            label="区域一"
                            value="shanghai"
                          ></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-select
                          size="mini"
                          style="width: 120px"
                          class="params-input"
                          v-model="formInline.region"
                          placeholder="活动区域"
                        >
                          <el-option
                            label="区域一"
                            value="shanghai"
                          ></el-option>
                          <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                        <el-input
                          style="width: 400px"
                          size="mini"
                          placeholder="请输入内容"
                          suffix-icon="el-icon-date"
                          v-model="input4"
                        >
                        </el-input>
                      </div>
                      <!-- 增加按钮部分 -->
                      <el-button type="text" class="add-btn">
                        <i class="el-icon-circle-plus-outline">增加</i>
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="add-search-bottom">
            <el-button type="text" class="add-btn">
              <i class="el-icon-circle-plus-outline">增加</i>
            </el-button>
            <el-button type="primary" class="add-btn" size="mini"> 按钮</el-button>
          </div>
        </div>
      </div>
      <div class="l-container">
           <div class="total">共查询出 <span>0</span>条数据</div>
      <div class="empty-content-zzp">
        <img src="../../../assets/images/light.svg" alt="" />
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import Left from "../../../components/PresetLog/Left.vue";
import Right from "../../../components/PresetLog/Right.vue";

export default {
  components: { Left, Right },

  data() {
    return {
      input4: "",
      showIndex: true,
      formInline: {
        user: "",
        region: "",
        time: "",
      },
    };
  },
  methods: {
    onSubmit() {
      this.showIndex = false;
    },
  },
};
</script>

<style lang="scss">
.preset-log {
  height: 100%;
  .el-form {
    display: flex;
  }
  .el-form-item {
    margin-bottom: 0 !important;
  }
  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }
    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }
    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .drawmain {
      padding: 0 16px 10px 16px;
      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;
        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;
          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }
          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;
            &::after {
              content: "";
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }
            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;
              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }
              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }
              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }
  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }
    .params-input {
      margin-right: 8px;
    }
  }
  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }
  .l-container{
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;
      .total {
    padding: 8px;
    font-size: 14px;
  }
  }
  .page-container{
    margin-top: 20px;
  }
}
</style>
